<template>
  <div>
    <div>案例</div>
    <div>当前坐标：{{'(' + position.x + ',' + position.y + ')'}}</div>
    <hr>
    <div>当前数量：{{count}}</div>
    <button @click="handleClick">点击</button>
  </div>
</template>
<script>
import { onMounted, onUnmounted } from 'vue'
// 以功能为单位进行代码复用（粒度）：React的Hook Api
import m1 from './module/m1.js'
import m2 from './module/m2.js'

export default {
  name: 'App',
  setup () {
    // 1. 记录鼠标的坐标

    // 注意：生命周期函数必须在setup函数的顶层
    onMounted(m1.bindEvent)
    onUnmounted(m1.unbindEvent)
    // --------------------------------------------
    // 2. 实现点击累加效果

    return { ...m1, ...m2 }
  }
}
</script>
